<template>
  <div style="width: 100%">
    <div
      style="padding-right: 40px; display: flex; justify-content: space-between"
    >
      <h3 style="font-weight: bold">今日消费金额</h3>
      <div>
        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="USD"> USD</a-menu-item>
            <a-menu-item key="GBP"> GBP </a-menu-item>
            <a-menu-item key="EUR"> EUR </a-menu-item>
            <a-menu-item key="CAD"> CAD </a-menu-item>
          </a-menu>
          <a-button size="small">
            {{ currency }} <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>
    </div>
    <a-spin :spinning="spinning" tip="Loading...">
      <div style="width: 90%; height: 350px; color: #000">
        <dv-scroll-ranking-board
          v-if="showFlag"
          :config="config"
          style="width: 90%; height: 350px; color: #000"
        />
      </div>
    </a-spin>
  </div>
</template>

<script>
import { home_getNowCost } from "@/apis/system/Home/Home";
export default {
  created() {
    this.getNowCost();
  },
  data() {
    return {
      currency: "USD",
      config: {
        // header: ["今日代发入库消费", "联系电话", "消费金额", "未结算金额"],
        data: [
          {
            name: "今日代发入库消费",
            value: 0,
          },
          {
            name: "今日代发出库消费",
            value: 0,
          },
          {
            name: "今日转运入库消费",
            value: 0,
          },
          {
            name: "今日转运出库消费",
            value: 0,
          },
          {
            name: "今日退件消费",
            value: 0,
          },
          {
            name: "今日工单消费",
            value: 0,
          },
        ],
        waitTime: 3000,
      },

      showFlag: false,
      spinning: false,
    };
  },
  methods: {
    handleMenuClick(e) {
      this.currency = e.key;
      this.getNowCost(e.key);
    },
    async getNowCost(key = "USD") {
      this.showFlag = false;
      this.spinning = true;
      let { code, responseBody } = await home_getNowCost(key);
      if (code === "200") {
        if (responseBody) {
          this.config.data[0].value = responseBody.orderSumOfMoney * 1;
          this.config.data[1].value = responseBody.orderOtherSumOfMoney * 1;
          this.config.data[2].value = responseBody.transferIntoSumOfMoney * 1;
          this.config.data[3].value = responseBody.transferOutSumOfMoney * 1;
          this.config.data[4].value =
            responseBody.returnReceptionSumOfMoney * 1;
          this.config.data[5].value = responseBody.workOrderSumOfMoney * 1;
        } else {
          this.config.data[0].value = 0;
          this.config.data[1].value = 0;
          this.config.data[2].value = 0;
          this.config.data[3].value = 0;
          this.config.data[4].value = 0;
          this.config.data[5].value = 0;
        }
        this.spinning = false;
        this.showFlag = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.dv-scroll-ranking-board .ranking-column .inside-column {
  background-image: linear-gradient(to right, #1ec695, #33cccc);
  height: 10px;
}
/deep/.dv-scroll-ranking-board .ranking-column {
  border-bottom-color: #20c799;
}
/deep/.dv-scroll-ranking-board .ranking-info .rank {
  color: #20c799;
}
</style>
